<template>
    <div class="login-container">
        <div class="login-box">
            <h1>欢迎来到豹饱巴士外卖</h1>
            <h2 v-if="isLogin">用户登录</h2>
            <h2 v-else>用户注册</h2>
            <div class="form-item">
                <aa v-if="user.sjh==''" style="color: red">*</aa>
                <aa v-else-if="!/^1[0-9]{10}$/.test(user.sjh)" style="color: red">*请输入正确的手机号</aa>
                <el-input
                    v-model="user.sjh"
                    placeholder="请输入手机号"
                    clearable
                    style="width: 100%"
                    size="large"
                >
                    <template #prefix>
                        <el-icon><User /></el-icon>
                    </template>
                </el-input>
            </div>
            <div class="form-item">
                <el-input
                    v-model="user.pwd"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                    style="width: 100%"
                    size="large"
                >
                    <template #prefix>
                        <el-icon><Lock /></el-icon>
                    </template>
                </el-input>
            </div>
            <div class="button-group">
                <el-button v-if="isLogin" type="primary" style="width: 48%" @click="login"
                      size="large">登录</el-button>
                <el-button type="success" style="width: 48%" @click="register"
                      size="large">注册</el-button>
              <el-button v-if="!isLogin" type="danger" style="width: 48%" @click="backLogin"
                         size="large">取消</el-button>
                <el-button type="info" @click="backUser"
                           size="large">返回主页</el-button>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import axios from "axios";
import router from "../router.ts";
import {ElMessage} from "element-plus";


const isLogin = ref(true);
const user=ref({
    sjh: '',
    pwd: '',
    yhm: ''
});
const login = async () => {
    const {data} = await axios.get('/api/user',{params:user.value});
    if(data.message=="登录成功"){
        ElMessage.success('登录成功');
        await router.push('/user/delivery1');
    }else{
        ElMessage.error('登录失败');
    }

};
//-------------------返回主页------------------
const backUser = ()=>{
    router.replace({ path: '/user/delivery1' });
}

const backLogin =async () => {
    isLogin.value=true;
};

const register  = async () => {
  if(isLogin.value){
    isLogin.value=false;
  }
  else{
      if(!/^1[0-9]{10}$/.test(user.value.sjh)){
          ElMessage.error('请输入正确的手机号');
          return;
      }else if(user.value.pwd==''){
          ElMessage.error('请填写完整信息');
          return;
      }
      user.value.yhm='用户'+new Date().getTime();
    const {data} = await axios.post('http://localhost:8081/user',user.value);
    if(data.success){
      ElMessage.success(data.message);
      await backLogin();
    }
    else ElMessage.error(data.message);
  }

};
</script>




<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
}

.login-box {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.form-item {
    margin-bottom: 20px;
    text-align: left;
}

.input-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
</style>
